<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-23 17:55:45
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-12-21 08:57:18
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="add modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1244px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form *ngIf="active" #bopForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{title}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 730px!important; width: 100%;">
                    <div class="p-formgroup-inline flex">
                        <div class="flex">
                            <label style="margin-top: 5px;">*合格证号：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="qualifiedNumber"
                                type="text" [(ngModel)]="form.qualifiedNumber" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;">*产品图号：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;"
                                name="productDrawingNo" type="text" [(ngModel)]="form.productDrawingNo" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;">*产品名称：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="productName"
                                type="text" [(ngModel)]="form.productName" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 53px;">*批次:</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="batch"
                                type="text" [(ngModel)]="form.batch" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 97.02px;">合格证任务号：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;"
                                name="qualifiedTaskNumber" type="text" [(ngModel)]="form.qualifiedTaskNumber" />
                        </div>
                    </div>

                    <div class="p-formgroup-inline mt flex" style=" width: 100%;">
                        <div style="width: 57.5%;height: 100%;">
                            <div class="p-formgroup-inline flex">
                                <div class="flex">
                                    <label class="lwid-new">*可用数量：</label>
                                    <input disabled style=" width:150px;height: 35px;margin-right: 10px;"
                                        name="quantity" type="number" [(ngModel)]="form.storeQuality" />
                                </div>
                                <div class="flex">
                                    <label class="lwid-new" style="margin-top: 5px;">阶段标记：</label>
                                    <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                        style=" width:150px;height: 35px;margin-right: 10px;" name="stageMark"
                                        type="text" [(ngModel)]="form.stageMark" />
                                </div>
                                <div class="flex">
                                    <label class="lwid-new" style="margin-top: 5px;">标准件规格:</label>
                                    <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                        style=" width:150px;height: 35px;margin-right: 10px;"
                                        name="standardSpecification" type="text"
                                        [(ngModel)]="form.standardSpecification" />
                                </div>
                            </div>
                            <div class="p-formgroup-inline mt flex">
                                <div class="flex">
                                    <label class="lwid-new" style="margin-top: 5px;">技术文件号:</label>
                                    <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                        style=" width:150px;height: 35px;margin-right: 10px;" name="documentNo"
                                        type="text" [(ngModel)]="form.documentNo" />
                                </div>
                                <div class="flex">
                                    <label class="lwid-new" style="margin-top: 5px;">化(试)验号:</label>
                                    <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                        style=" width:150px;height: 35px;margin-right: 10px;" name="mthd" type="text"
                                        [(ngModel)]="form.mthd" />
                                </div>
                                <div class="flex">
                                    <label class="lwid-new" style="margin-top: 5px;">炉(批)号：</label>
                                    <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                        style=" width:150px;height: 35px;margin-right: 10px;" name="heatNumber"
                                        type="text" [(ngModel)]="form.heatNumber" />
                                </div>
                            </div>
                            <div class="p-formgroup-inline mt flex">
                                <label class="lwid-new" style="margin-top: 5px;">特殊记载:</label>
                                <textarea rows="5" cols="30" [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                    style=" width:614px;height: 53px;" name="specialRecords" type="text"
                                    [(ngModel)]="form.specialRecords" ></textarea>
                            </div>
                        </div>
                        <div class="flex" style="width: 42.5%;height: 100%;">
                            <div class="flex">
                                <div class="flex">
                                    <label style="width: 53px;">可用产品编号(件号):</label>
                                    <div class="row align-items-center">
                                        <div class="primeng-datatable-container">
                                            <p-table [value]="productCode" [lazy]="true" [scrollable]="true">
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th style="width: 50px">序号</th>
                                                        <th style="width: 100px">产品编号</th>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-record="$implicit"
                                                    let-rowIndex="rowIndex">
                                                    <tr>
                                                        <td style="width: 50px">{{rowIndex+1}}</td>
                                                        <td pEditableColumn style="width: 100px"
                                                            *ngIf="title != '合格证手工入库信息查看'">
                                                            <p-cellEditor>
                                                                <ng-template pTemplate="input">
                                                                    <input pInputText name="rowIndex" type="text"
                                                                        [(ngModel)]="record.code">
                                                                </ng-template>
                                                                <ng-template pTemplate="output">
                                                                    {{record.code}}
                                                                </ng-template>
                                                            </p-cellEditor>
                                                        </td>
                                                        <td *ngIf="title == '合格证手工入库信息查看'" style="width: 100px">
                                                            {{record.code}}</td>
                                                    </tr>
                                                </ng-template>
                                            </p-table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-formgroup-inline mt flex">
                        <div class="flex">
                            <label class="lwid" style="margin-top: 5px;">所有数量：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="amount"
                                type="text" [(ngModel)]="form.amount" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 77px;">所有产品编号：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="jianNum"
                                type="text" [(ngModel)]="form.jianNum" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;">接收车间：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="inceptWorkshop"
                                type="text" [(ngModel)]="form.inceptWorkshop" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;">质控卡号：</label>
                            <input disabled style=" width:150px;height: 35px;margin-right: 10px;" name="qcCardNo"
                                type="text" [(ngModel)]="form.qcCardNo" />
                        </div>
                    </div>
                    <div class="p-formgroup-inline mt flex">
                        <div class="flex">
                            <label class="lwid-new" style="margin-top: 5px;">材料牌号：</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="materialGrade" type="text"
                                [(ngModel)]="form.materialGrade" />
                        </div>
                        <div class="flex">
                            <label class="lwid-new" style="margin-top: 5px;">材料状态：</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="materialStatus" type="text"
                                [(ngModel)]="form.materialStatus" />
                        </div>
                        <div class="flex">
                            <label class="lwid-new" style="margin-top: 5px;">材料规格：</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="materialSpecification"
                                type="text" [(ngModel)]="form.materialSpecification" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 55px;">技术条件:</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                style=" width:406px;height: 35px;margin-right: 10px;" name="technicalConditions"
                                type="text" [(ngModel)]="form.technicalConditions" />
                        </div>
                    </div>
                    <div class="p-formgroup-inline mt flex">
                        <div class="flex">
                            <label class="lwid-new" style="margin-top: 5px;">材料合格证:</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="materialCertificate"
                                type="text" [(ngModel)]="form.materialCertificate" />
                        </div>
                        <div class="flex">
                            <label class="lwid-new" style="margin-top: 5px;">协作合格证:</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="cooperationCertificate"
                                type="text" [(ngModel)]="form.cooperationCertificate" />
                        </div>
                        <div class="flex time">
                            <label class="lwid-new" style="margin-top: 5px;">非金属制造日期:</label>
                            <p-calendar [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                name="nonMetallicManufacturingDate" [(ngModel)]="nonMetallicManufacturingDate"
                                [showIcon]="true" dateFormat="yy-mm-dd">
                            </p-calendar>
                        </div>
                        <div class="flex time">
                            <label style="width:53px;margin-left: 10px;">非金属压制日期:</label>
                            <p-calendar [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                name="nonMetallicPressingDate" [(ngModel)]="nonMetallicPressingDate" [showIcon]="true"
                                dateFormat="yy-mm-dd"></p-calendar>
                        </div>
                        <div class="flex">
                            <label style="width: 97.02px;margin-left: 10px;margin-top: 5px;">供应单位：</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="supplyCompany" type="text"
                                [(ngModel)]="form.supplyCompany" />
                        </div>
                    </div>
                    <div class="p-formgroup-inline mt flex">
                        <div class="flex">
                            <label class="lwid-new" style="margin-top: 5px;">制造车间：</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="manufacturingWorkshop"
                                type="text" [(ngModel)]="form.manufacturingWorkshop" />
                        </div>
                        <div class="flex time">
                            <label class="lwid-new" style="margin-top: 5px;">开证日期：</label>
                            <p-calendar [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'" name="date"
                                [(ngModel)]="date" [showIcon]="true" dateFormat="yy-mm-dd">
                            </p-calendar>
                        </div>
                        <div class="flex">
                            <label class="lwid-new" style="margin-top: 5px;margin-left: 10px;">生产工人：</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="productionWorkers"
                                type="text" [(ngModel)]="form.productionWorkers" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 53px;">工(组)长:</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="foreman" type="text"
                                [(ngModel)]="form.foreman" />
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 97.02px;">检验员：</label>
                            <input [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="inspector" type="text"
                                [(ngModel)]="form.inspector" />
                        </div>

                    </div>
                    <hr style="border: 0.5px solid #DDDDDD;" [hidden]="title == '产品隔离'">
                    <div class="p-formgroup-inline flex mt">
                        <div class="flex">
                            <label class="lwid-new">*型 号 (产品代号)：</label>
                            <p-multiSelect [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                [panelStyle]="{width:'150px'}" [options]="modelOptions" id="model" dataKey="value"
                                optionLabel="label" filter="true" name="model" #modelSelect="ngModel" required
                                [(ngModel)]="model" defaultLabel="请选择型号"  [itemSize]="34" (onChange)="getSendTime($event)">
                            </p-multiSelect>
                            <validation-messages [formCtrl]="modelSelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label class="lwid-new" style="margin-top: 5px;margin-left: 10px;">*发次：</label>
                            <p-multiSelect [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                [panelStyle]="{width:'150px'}" [options]="sendTimeOptions" id="sendTime" dataKey="value"
                                optionLabel="label" filter="true" name="sendTime" #sendTimeSelect="ngModel" required
                                [(ngModel)]="sendTime" defaultLabel="请选择型号"  [itemSize]="34">
                            </p-multiSelect>
                            <validation-messages [formCtrl]="sendTimeSelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label class="lwid-new" style="margin-left: 10px;margin-top: 5px;">*物料类别：</label>
                            <p-dropdown [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'"
                                (onChange)="onChange($event)" required #materialsNodeSelect="ngModel" filter="true"
                                name="materialsNode" [options]="materialsNodeOptions" placeholder="请选择合格证号"
                                [(ngModel)]="form.materialsNodeId" emptyFilterMessage="暂无数据">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="materialsNodeSelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label style="width: 61px;margin-left: 2px;margin-top: 5px;">*物料细类:</label>
                            <p-dropdown [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'" required
                                #materialCategorySelect="ngModel" filter="true" name="materialCategory"
                                [options]="materialCategoryOptions" placeholder="请选择合格证号"
                                [(ngModel)]="form.materialCategoryId" emptyFilterMessage="暂无数据">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="materialCategorySelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;margin-left: 10px;width: 97.02px;">*规格：</label>
                            <p-dropdown [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'" filter="true"
                                name="module" [options]="moduleOptions" placeholder="请选择合格证号" [(ngModel)]="form.module"
                                emptyFilterMessage="暂无数据"  #moduleSelect="ngModel" required>
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="moduleSelect"></validation-messages>
                        </div>
                    </div>
                    <div class="p-formgroup-inline flex mt">
                        <div class="flex time">
                            <label style="margin-top: 5px;" class="lwid-new">有效期止：</label>
                            <p-calendar [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'" name="expirationDate"
                                [(ngModel)]="expirationDate" [showIcon]="true" dateFormat="yy-mm-dd">
                            </p-calendar>
                        </div>
                        <div class="flex">
                            <label class="lwid-new" style="margin-top: 5px;margin-left: 10px;">*单位：</label>
                            <p-dropdown [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'" required
                                #unitSelect="ngModel" filter="true" name="unit" [options]="unitOptions"
                                placeholder="请选择合格证号" [(ngModel)]="form.unitId" emptyFilterMessage="暂无数据">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="unitSelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label class="lwid-new" style="margin-top: 5px;margin-left: 10px;">储位：</label>
                            <p-dropdown [disabled]="title == '产品隔离' || title == '合格证手工入库信息查看'" filter="true"
                                name="binLocation" [options]="binLocationOptions" placeholder="请选择储位"
                                [(ngModel)]="form.binLocationId" emptyFilterMessage="暂无数据">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                        </div>
                    </div>
                    <hr style="border: 0.5px solid #DDDDDD;" [hidden]="title == '合格证手工入库信息修改'">
                    <div class="p-formgroup-inline flex" *ngIf="title != '合格证手工入库信息修改'">
                        <div class="flex">
                            <label class="lwid" style="margin-top: 5px;">*隔离单号:</label>
                            <input [disabled]="title != '产品隔离'" required #isolationCodeInput="ngModel"
                                style=" width:150px;height: 35px;margin-right: 10px;" name="IsolationCode" type="text"
                                [(ngModel)]="apartForm.isolationCode" />
                            <validation-messages [formCtrl]="isolationCodeInput"></validation-messages>
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;margin-right: 10px;">*解除配套/预配套关系:</label>
                            <p-toggleButton [disabled]="title != '产品隔离'" name="isOrNot" [(ngModel)]="isOrNot"
                                [style]="{'width':'60px'}" onLabel="是" offLabel="否"></p-toggleButton>
                        </div>
                    </div>
                    <div class="p-formgroup-inline flex mt" *ngIf="title != '合格证手工入库信息修改'">
                        <div class="flex">
                            <label style="margin-top: 5px;">*隔离原因:</label>
                            <input [disabled]="title != '产品隔离'" required #isolationReasonInput="ngModel"
                                style=" width:856px;height: 50px;margin-right: 10px;" name="isolationReason" type="text"
                                [(ngModel)]="apartForm.isolationReason" />
                            <validation-messages [formCtrl]="isolationReasonInput"></validation-messages>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="justify-content: center;" *ngIf="title != '合格证手工入库信息查看'">
                    <button pButton [disabled]="!bopForm.form.valid" type="button" label="取消" (click)="close()"
                        style="margin-left: 0.5rem"></button>
                    <button pButton [hidden]="title == '产品隔离'" [disabled]="!bopForm.form.valid" type="button" label="保存"
                        (click)="save()" style="margin-left: 0.5rem"></button>
                    <button pButton [hidden]="title != '产品隔离'" [disabled]="!bopForm.form.valid" type="button" label="隔离"
                        (click)="ex()" style="margin-left: 0.5rem"></button>
                </div>
            </form>
        </div>
    </div>
</div>